<template>
  <view>
    <cu-custom bgColor="bg-gradual-green">
      <block slot="content">客户首页</block>
    </cu-custom>
    <!-- <view class="title">
			<image src="/static/24.png" mode=""></image>
		</view>
		<view class="swiper">
			<swiper style="height: 380upx;background-color: #FFFFFF;" circular autoplay duration="1000">
				<swiper-item v-for="(item,index) in image" :key='index'>
						<view style="padding: 0upx 30upx 20upx 30upx;height: 100%;">
							<image style="width: 100%;height: 100%;" :src="item.src" @click="jump" :data-src='item.path'></image>
						</view>
				</swiper-item>
			 </swiper>
		</view> -->

    <view style="background-color: #fff;padding: 30upx;">
      <view style="display: flex;justify-content: space-between;">
        <view style="background-color: #F1F5FC;border-radius: 15upx;width: 330upx;height: 210upx;padding: 30upx;">
          <view style="display: flex;justify-content: space-between;">
            <view>
              <image style="width: 100upx;height: 100upx;" src="../../static/ic_index_today_schedule.png" mode=""></image>
            </view>
            <view style="font-size: 65upx;line-height: 100upx;">
              {{reservationNum}}
            </view>
          </view>
          <view>
            <view style="font-size: 28upx;">
              今日预约
            </view>
          </view>
        </view>
        <view style="background-color: #FCF4F1;border-radius: 15upx;width: 330upx;height: 210upx;padding: 30upx;">
          <view style="display: flex;justify-content: space-between;">
            <view>
              <image style="width: 100upx;height: 100upx;" src="../../static/ic_index_month_class.png" mode=""></image>
            </view>
            <view style="font-size: 65upx;line-height: 100upx;">
              {{monthTeachingNum}} <text style="font-size: 35upx;color: #666;">节</text>
            </view>
          </view>
          <view>
            <view style="font-size: 28upx;">
              今日上课次数
            </view>
          </view>
        </view>
      </view>
    </view>

    <view style="margin-top: 15upx;width: 100%;background-color: #fff;">
      <view style="display: flex;justify-content: space-between;">
        <view style="line-height: 84upx;font-size: 34upx;margin-left: 30upx;font-weight: 550;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;height: 80upx;">
          客户列表
        </view>
        <view style="line-height: 80upx;font-size: 38upx;margin-right: 30upx;height: 80upx;" @click="jump" data-src='/pagesA/maillist/maillist'>
          <text style="font-size: 30upx;color: #39bb9e;font-weight: 500;vertical-align: middle;">查看全部</text>
          <text class="cuIcon-right text-gray" style="vertical-align: middle;font-size: 32upx;"></text>
        </view>
      </view>
      <view style="display: flex;padding-left: 20upx;padding-bottom: 20upx;">
        <!-- <view @click="jump" data-src='/pagesA/add_customer/add_customer'>
					<view class="cu-avatar lg margin-xs " style="background-color: #fff;">
						<image src="/static/tianjia.png" mode="widthFix"></image>
					</view>
					<view style="font-size: 22upx;color: #666;text-align: center;color: #3A89BE;">
						添加客户
					</view>
				</view>
				<view style="width: 6upx;height: 100upx;background-color: #F8F8F8;margin-top: 22upx;margin-left: 20upx;"></view> -->
        <view v-if="records.length == 0" style="width: 670upx;height: 142upx;line-height: 142upx;text-align: center;background-color: #F8F8F8;margin-left: 20upx;color: #999;box-sizing: border-box;">
          暂无最近联系客户
        </view>
        <scroll-view scroll-x="true" style="width: 690upx;" v-if="records.length > 0">
          <view style="display: flex;margin: 0 20upx;">
            <view v-for="(item,index) in records" :key='index' @tap.stop.prevent="jump" :data-src='"/pagesA/customer_details/customer_details?id="+item.userId'>
              <!--  -->
              <view class="cu-avatar round lg margin-xs bg-gradual-green">
                <view class="u-f-ajc avatar-text avatar_ui">
                  {{ item.nickName || item.username }}
                </view>
              </view>
              <view style="font-size: 20upx;color: #666;text-align: center;">
                {{ item.nickName || item.username }}
              </view>
            </view>
          </view>
        </scroll-view>

      </view>
    </view>

    <view style="margin-top: 15upx;width: 100%;background-color: #fff;">
      <view style="line-height: 84upx;font-size: 34upx;margin-left: 30upx;height: 80upx;font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;font-weight: 550;">
        常用功能
      </view>
      <view style="padding: 0 30upx;flex-wrap: wrap;" class="u-f-ac u-f-jsb common-use">
        <view style="margin: 0upx 15upx 30upx 15upx;" v-for="(item,index) in menus" :key='index'>
          <view @click="jump" :data-src='item.path' style="width: 100upx;height: 100upx;overflow: hidden;position: relative;">
            <image style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 120%;height: 240upx;"
              :src="item.src" mode="widthFix"></image>
          </view>
          <view style="font-size: 20upx;color: #666;text-align: center;margin-top: 10upx;">
            {{item.title}}
          </view>
        </view>
      </view>
    </view>


    <view style="margin-top: 15upx;background-color: #fff;padding: 30upx;">
      <view style="display: flex;justify-content: space-between;">
        <view style="background-color: #F1F5FC;border-radius: 15upx;width: 340upx;height: 210upx;padding: 30upx;">
          <view style="line-height: 50upx;">
            私教客户
          </view>
          <view style="display: flex;justify-content: space-between;">
            <view>
              <view style="font-size: 65upx;">
                {{teachingNum}}
              </view>
              <view style="font-size: 22upx;">
                本月上课
              </view>
            </view>
            <view>
              <view style="font-size: 65upx;">
                {{courseNum}}
              </view>
              <view style="font-size: 22upx;">
                剩余课时
              </view>
            </view>
          </view>
        </view>
        <view style="background-color: #FCF4F1;border-radius: 15upx;width: 340upx;height: 210upx;padding: 30upx;margin-bottom: 200upx;">
          <view style="line-height: 50upx;">
            潜在客户
          </view>
          <view style="display: flex;justify-content: space-between;">
            <view>
              <view style="font-size: 65upx;">
                {{potential}}
              </view>
              <view style="font-size: 22upx;">
                正式客户
              </view>
            </view>
            <view>
              <view style="font-size: 65upx;">
                {{formal}}
              </view>
              <view style="font-size: 22upx;">
                潜在客户
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        modalName: null,
        image: [{
            src: 'cloud://jianshen-6g5fzx5gfbc2096b.6a69-jianshen-6g5fzx5gfbc2096b-1304015367/333_03.png',
            path: 'Not-yet-open'
          },
          {
            src: 'cloud://jianshen-6g5fzx5gfbc2096b.6a69-jianshen-6g5fzx5gfbc2096b-1304015367/2222_03.png',
            path: 'Not-yet-open'
          },

        ],
        menus: [{
            title: '客户到访表',
            src: '/static/fangke.png',
            path: '/pagesA/visitors/visitors'
          },
          {
            title: '问卷调查',
            src: '/static/schedule.png',
            path: '/pagesA/Questionnaire/Questionnaire'
          },
          {
            title: '身体测试',
            src: '/static/ic_body_test_2.png',
            path: '/pagesA/Physical_test/Physical_test_list'
          },
          {
            title: '训练方案',
            src: '/static/ic_training_program_2.png',
            path: '/pagesA/Training_program/Training_program'
          },
          {
            title: '备课计划',
            src: '/static/ic_training_workout_2.png',
            path: '/pagesA/Preparation_plan/Preparation_plan'
          },
          {
            title: '静态评估',
            src: '/static/ic_attitude_assessment_2.png',
            path: '/pagesA/Static_evaluation/Static_evaluation'
          },
          // {
          //   title: '动态评估',
          //   src: '/static/ic_dynamic_evaluate_2.png',
          //   path: '/pagesA/Preparation_plan/Preparation_plan'
          // },
          {
            title: '体适能评估',
            src: '/static/ic_physical_fitness_assessment_2.png',
            path: '/pagesA/Physical_fitness_assessment/user_list'
          },
          {
            title: '体验课',
            src: '/static/ic_group_class_2.png',
            path: '/pagesA/trial_class/trial_class'
          },
          {
            title: 'FMS测试',
            src: '/static/ic_fms_2.png',
            path: '/pagesA/fms_test/fms_test'
          },
          // {
          // 	title : '其他页面',
          // 	src : '/static/BasicsBg.png',
          // 	path : 'Not-yet-open'
          // },
        ],
        records: [],
        courseNum: 0,
        formal: 0,
        monthTeachingNum: 0,
        potential: 0,
        reservationNum: 0,
        teachingNum: 0,
      }
    },
    
    mounted() {
      let that = this;
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          console.log('成功')
          that.openid = res.data
          that.setajax()
        },
        fail: () => {
          console.log('失败')
          uni.navigateTo({
            url: '/pagesA/login/login'
          })
        }
      });
    },
    methods: {
      updateManager() {
        // // #ifndef H5 || APP-PLUS
        // const updateManager = uni.getUpdateManager();

        // updateManager.onCheckForUpdate(function(res) {
        //   // 请求完新版本信息的回调
        //   console.log(res.hasUpdate);
        // });

        // updateManager.onUpdateReady(function(res) {
        //   uni.showModal({
        //     title: '更新提示',
        //     content: '新版本已经准备好，是否重启应用？',
        //     success(res) {
        //       if (res.confirm) {
        //         // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        //         updateManager.applyUpdate();
        //       }
        //     }
        //   });
        //   // #endif
        //   updateManager.onUpdateFailed(function(res) {
        //     // 新的版本下载失败
        //   })
        // });

      },
      async setajax() {
        let data = {
          'coachId': this.openid,
          // coachId: 47,
          level: 0,
        }
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/members/getCoachMembersList",
          data,
        })
        this.records = datas.list
        console.log('查看nike', typeof this.records[3].nickName == null)
        this.courseNum = datas.courseNum
        this.formal = datas.formal
        this.monthTeachingNum = datas.dayTeachingNum
        this.potential = datas.potential
        this.reservationNum = datas.reservationNum
        this.teachingNum = datas.monthTeachingNum
      },
      // setajax(){
      // 	var data = {
      // 		'coachId': this.openid,
      // 		level: 0,
      // 	}
      // 	uni.request({
      // 		url: 'https://jxjsservice.jxfit.cn/coach/members/getCoachMembersList',
      // 		method: 'GET',
      // 		data: data,
      // 		header:{'Content-Type':'application/x-www-form-urlencoded'},
      // 		success: res => {
      // 			console.log(res)
      // 			this.records = res.data.datas.list
      // 			this.courseNum = res.data.datas.courseNum
      // 			this.formal = res.data.datas.formal
      // 			this.monthTeachingNum = res.data.datas.monthTeachingNum
      // 			this.potential = res.data.datas.potential
      // 			this.reservationNum = res.data.datas.reservationNum
      // 			this.teachingNum = res.data.datas.teachingNum
      // 		},
      // 		fail: () => {},
      // 		complete: () => {}
      // 	});
      // },
      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
    }
  }
</script>

<style lang="scss">
  .hover-btn {
    background-color: #dfdfdf;
  }

  .headerBar {
    width: 100%;
    height: 130upx;
    background-color: #525969;
    position: fixed;
    top: 0;
    z-index: 999;

    .headerBar_title {
      color: #fff;
      line-height: 130upx;
      font-size: 38upx;
      margin-left: 40upx;
    }
  }

  .title {
    background-color: #fff;
    // margin-top: 130upx;
    width: 100%;
    text-align: center;

    image {
      width: 250upx;
      height: 130upx;
    }
  }

  .avatar_ui {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .common-use::after {
    content: '';
    flex: auto;
  }
</style>
